<script setup>
    import { ElMessage } from 'element-plus';
    import { getCurrentInstance, watch, ref } from 'vue'
    import { useRoute } from 'vue-router'
    import { computedPlayTime } from '../../tools/play';
    const axios = getCurrentInstance().proxy.$http;
    const route = useRoute();



    let songs = ref();
    watch(route, async (newValue) => {
        songs.value = '';
        let keyword = newValue.query.keyword;
        try{
            const { data } = await axios.get(`/search?keywords=${keyword}`);
            songs.value = data.result.songs;
        }catch(err) {
            ElMessage({ type: 'warning', message: 'search接口出现问题' })
        }
        
    },{
        immediate: true
    })

</script>

<template>
    <UserHeader></UserHeader>
    <div class="main">
        <Loading v-show="!songs"></Loading>
        <ul class="wrap" v-show="songs">
            <li v-for="item of songs">
                <p>
                    <PlayBtn :id="item.id"></PlayBtn>
                    <Add 
                        :id="item.id"
                        :songName="item.name"
                        :singerList="item.artists"
                        :duration="item.duration"
                    ></Add>
                    <span>{{item.name}}</span>
                </p>
                <p>
                    <template v-for="value in item.artists">
                        {{value.name}}
                    </template>
                </p>
                <p>《{{item.album.name}}》</p>
                <p>{{computedPlayTime(item.duration)}}</p>
            </li>
        </ul>
    </div>
    <UserFooter></UserFooter>
</template>
<style lang='less' scoped>

    .wrap{
        border: 1px solid #eee;
        border-radius: 5px;
        padding: 5px;
        li{
            height: 30px;
            line-height: 30px;
            display: grid;
            grid-template-columns: 1fr repeat(3, 180px);
            font-size: 13px;
            &:nth-child(2n) {
                background-color: aliceblue;
            }
            p{
                overflow: hidden;
                white-space: normal;
                text-overflow: ellipsis;
                padding: 0px 15px;
                &:first-child {
                    display: flex;
                    align-items: center;
                    span{
                        margin-left: 20px;
                    }
                }
            }
        }
    }

</style>